<template>
	<view :style="{ background: backgorund, }">
		<view class="top-box">
			<image :src="topImg"></image>
		</view>
		<scroll-view v-if="scrollViewWidth > tabbarItemTotalWidth" :scroll-left="scrollLeft" class="scroll-view-box" scroll-with-animation scroll-x="true">
			 <view class="body-box">
					<view class="tabbar-box" style="justify-content: center;">
							<view @click="tabbarChange(item.id,index)" 
								v-for="(item,index) in tabbars" 
								:key="index"
								class="tabbar-item" 
								:class="tabbarSelect == item.id ? 'tabbar-item-active' : ''"
								:id="'item' + index"
							>
								{{ item.name }}
							</view>
					</view>
			</view>
		</scroll-view>
		<scroll-view v-else :scroll-left="scrollLeft" class="scroll-view-box" scroll-with-animation scroll-x="true">
			 <view class="body-box">
					<view class="tabbar-box">
							<view @click="tabbarChange(item.id,index)" 
								v-for="(item,index) in tabbars" 
								:key="index"
								class="tabbar-item" 
								:class="tabbarSelect == item.id ? 'tabbar-item-active' : ''"
								:id="'item' + index"
							>
								{{ item.name }}
							</view>
					</view>
			</view>
		</scroll-view>
		<view class="goods-box">
			<view class="recommend-box" :style="{ background: recBackGround }">
				<view class="title-box">
					<view class="title">{{ recTitle }}</view>
					<view class="content">{{ recSubTitle }}</view>
				</view>
				<view class="recommend-goods-box">
					<view v-for="(item,index) in recommendGoods" :key="index" class="goods-item" @click="jump(item.id)">
						<view class="goods-img">
							<image :src="item.img"></image>
						</view>
						<view class="goods-detail">
							<view class="goods-title">{{ item.name }}</view>
							<view class="goods-content">{{ item.caption || item.name }}</view>
							<view class="goods-price">
								￥<text style="font-weight: 600;margin: 0 5rpx;">{{ item.price }}</text>起
							</view>
							<view class="goods-button">立即抢购</view>
						</view>
					</view>
				</view>
			</view>
			<view class="footer-list">
				<view v-for="(item,index) in shActGoodsList" :key="index" class="footer-goods-item" @click="jump(item.id)">
					<view class="goods-img">
						<image mode="widthFix" :src="item.img"></image>
					</view>
					<view class="goods-detail">
						<view class="goods-title">
							{{ item.name }}
						</view>
						<view class="goods-price">
							<view class="price"><text class="rmb">￥</text>{{ item.price }}<text class="payNumber">{{item.sales}}人付款</text></view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				topImg: '',
				backgorund:'#fff',
				recBackGround: '#fff',
				recTitle: '',
				recSubTitle: '',
				tabbarSelect: 1,
				scrollLeft:0,
				tabbars:[],
				items: [],
				scrollViewWidth: 0,
				tabbarItemTotalWidth: 0,
				page: 1,
				shActGoodsList:[],
				recommendGoods:[]
			};
		},
		mounted() {
			this.init();
		},
		onShow(){
			console.log(this.$Route.query)
			this.topImg = this.$Route.query.nextImg;
			this.backgorund ='#' + this.$Route.query.nextBg;
			this.recBackGround = '#' + this.$Route.query.nextRecBg;
			this.recTitle = this.$Route.query.nextRecTitle || '热卖爆品';
			this.recSubTitle = this.$Route.query.nextRecSubTitle || '六九商城·百家正品联盟';
			uni.setNavigationBarTitle({
				title: this.$Route.query.name
			})
		},
		methods: {
			init (){
				this.getProductCategory().then(res=>{
					this.$nextTick(() => {
						uni.createSelectorQuery().in(this).selectAll('.tabbar-item').boundingClientRect(rects => {
							rects.forEach((rect, index) => {
								this.items[index] = {
									width: rect.width,
									left: rect.left
								};
								this.tabbarItemTotalWidth += rect.width;
							});
						}).exec();
						uni.createSelectorQuery().in(this).select('.scroll-view-box').boundingClientRect(rect => {
							this.scrollViewWidth = rect.width;
						}).exec();
					});
					this.getProductList(this.tabbarSelect)
				})
			},
			getProductCategory(){
				return new Promise((resolve,reject)=>{
					this.$http('goods.getProductCategory',{id:this.$Route.query.id}).then(res=>{
						if(res.code == 1){
							this.tabbars = res.data;
							this.tabbarSelect = res.data[0].id;
							resolve(res);
						}else{
							reject(res.msg);
						}
					}).catch(err=>{
						reject(err);
					})
				})
			},
			getProductList(id,reset = false){
				this.$http('goods.getProductList',{
					productCategoryId:id,
					pageSize:10,
					current:this.page
				}).then(res=>{
					if(res.code == 1){
						if(res.data.length > 0){
							if(this.page == 1){
								this.recommendGoods = res.data.slice(0,2)
								console.log(this.recommendGoods)
								res.data = res.data.slice(2)
							}
							if(reset){
								this.shActGoodsList = []
							}
							this.shActGoodsList = this.shActGoodsList.concat(res.data);
						}else{
							this.page -= 1;
							uni.showToast({
								title: '没有更多商品了~',
								icon: 'none'
							});
						}
					}
				})
			},
			tabbarChange(id,index){
				this.page = 1;
				this.getProductList(id,true);
				this.tabbarSelect = id;
				const item = this.items[index];
				this.scrollLeft = item.left - (this.scrollViewWidth - item.width) / 2;
			},
			currentChange() {
				this.page += 1;
				this.getProductList(this.tabbarSelect);
			},
			jump(e){
				this.$Router.push({
					path: '/pages/goods/detail',
					query: {
						id: e,
					}
				})
			}
		},
		onReachBottom() {
			this.currentChange();
		}
	}
</script>

<style lang="scss">
	.top-box{
		display: flex;
		height: 770rpx;
		image{
			width: 100%;
			height: auto;
			object-fit: cover;
		}
	}
	.scroll-view-box {
		width: 100%;
		padding: 0 20rpx;
		position: relative;
	}
	.body-box {
		.tabbar-box{
			white-space: nowrap;
			width: 100%;
			display: flex;
			align-items: center;
			font-size: 28rpx;
			.tabbar-item{
				border-radius: 5rpx;
				color: #f95a4d;
				padding: 5rpx 20rpx;
				font-weight: 400;
				// &:not(:first-child){
				// 	margin-left: 16rpx;
				// }
			}
			.tabbar-item-active{
				color: #fff;
				background-color: #f95a4d;
			}
		}
	}
	.goods-box {
		display: flex;
		flex-direction: column;
		padding: 16rpx;
		.recommend-box{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			border-radius: 10rpx;
			padding: 12rpx 18rpx;
			.title-box{
				.title{
					text-align: center;
					font-size: 34rpx;
					font-weight: 600;
				}
				.content{
					font-size: 26rpx;
					margin-top: 5rpx;
					color: rgba(28, 28, 28, 1);
				}
			}
			.recommend-goods-box{
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				grid-gap: 14rpx;
				margin-top: 26rpx;
				.goods-item{
					background: #fff;
					border-radius: 0 0 10rpx 10rpx;
					.goods-img{
						height: 296rpx;
						image{
							width: 100%;
							height: 296rpx;
						}
					}
					.goods-detail{
						padding: 10rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						flex-direction: column;
						.goods-title{
							font-size: 30rpx;
							font-weight: 600;
							height: 84rpx;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
							text-overflow: ellipsis;
						}
						.goods-content{
							width: 312rpx;
							text-align: center;
							font-size: 22rpx;
							color: rgba(80, 80, 80, 1);
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
						.goods-price{
							font-size: 30rpx;
							color: #d70e0e;
							margin-top: 6rpx;
						}
						.goods-button{
							padding: 10rpx 30rpx;
							background: #f95a4d;
							font-size: 24rpx;
							color: #fff;
							border-radius: 10rpx;
							margin-bottom: 26rpx;
							margin-top: 12rpx;
						}
					}
				}
			}
		}
		.footer-list{
			column-count: 2;
			column-gap: 20rpx;
			padding:0 16rpx 10rpx;
			.footer-goods-item{
				background-color: #fff;
				padding: 12rpx 14rpx;
				border-radius: 12rpx;
				display: inline-block;
				width: 100%;
				break-inside: avoid; 
				margin-top: 20rpx;
				.goods-img{
					width: 306rpx;
					image{
						border-radius: 14rpx;
						width: 306rpx;
					}
				}
				.goods-detail{
					.goods-title{
						width: 306rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						color: rgba(80, 80, 80, 1);
						font-size: 26rpx;
					}
					.goods-price{
						margin-top: 20rpx;
						.price{
							color: #d70e0e;
							font-size: 32rpx;
							.rmb{
								font-size: 20rpx;
							}
							.payNumber{
									color: rgba(141, 141, 141, 1);
									font-size: 18rpx;
									margin-left: 8rpx;
							}
						}
					}
				}
			}
		}
	}
</style>
